<template>
  <div class="integral">
    <a-tabs>
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="apple" />套保账户管理
        </span>
        <c-table
          :columns="accountColumns"
          :datas="tableData"
          :loading="loading"
          showPagination
          :paginationDatas="paginationDatas"
          @onPageSizeChange="onPageSizeChange"
          @onShowNumChange="onShowNumChange"
        >
          <template slot="action" slot-scope="row">
            <a @click="handleView(row)">
              <a-icon type="edit" />编辑
            </a>
            <a-divider type="vertical" />
            <a-popconfirm
              :title="`是否确认删除 角色?`"
              ok-text="确定"
              cancel-text="取消"
              @confirm="(handleDel([record.tableRow.id]))"
            >
              <a type="link">停止使用</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-popconfirm
              :title="`是否确认删除 角色?`"
              ok-text="确定"
              cancel-text="取消"
              @confirm="(handleDel([record.tableRow.id]))"
            >
              <a type="link">恢复使用</a>
            </a-popconfirm>
          </template>
        </c-table>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="android" />套保品种及比例
        </span>
        <c-table
          :columns="varietyColumns"
          :datas="tableData"
          :loading="loading"
          showPagination
          :paginationDatas="paginationDatas"
          @onPageSizeChange="onPageSizeChange"
          @onShowNumChange="onShowNumChange"
          @onAdd="handleAdd('','add')"
          add
          expandedRowRender="expandedRowRender"
        >
          <template slot="expandedRowRender" slot-scope="row">
            <p>
              <a-row>
                <a-col :span="8">
                  <span>开仓策略： {{row.tableRow.legalpersonName}}</span>
                </a-col>
                <a-col :span="8">
                  <span>点价限制：关闭</span>
                </a-col>
              </a-row>
            </p>
            <p>
              <a-row>
                <a-col :span="8">
                  <span>挂单限制：关闭</span>
                </a-col>
                <a-col :span="8">
                  <span>休盘策略：禁止点价/撤单</span>
                </a-col>
              </a-row>
            </p>
            <p>
              <a-row>
                <a-col>
                  交割月策略：挂单中满足指定整数倍部分挂单，
                  挂在交割月，不足部分暂时不挂单，
                  等待当月的成交（或者价格到了）之后，
                  不足部分就按照市价直接挂单到次月。
                </a-col>
              </a-row>
            </p>
          </template>
          <template slot="action" slot-scope="row">
            <a @click="handleView(row)">
              <a-icon type="edit" />编辑
            </a>
            <a-divider type="vertical" />
            <a-popconfirm
              :title="`是否确认删除 角色?`"
              ok-text="确定"
              cancel-text="取消"
              @confirm="(handleDel([record.tableRow.id]))"
            >
              <a type="link">停止使用</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-popconfirm
              :title="`是否确认删除 角色?`"
              ok-text="确定"
              cancel-text="取消"
              @confirm="(handleDel([record.tableRow.id]))"
            >
              <a type="link">恢复使用</a>
            </a-popconfirm>
          </template>
        </c-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "integral",
  components: {},
  data() {
    return {
      accountColumns: [
        {
          title: "套保品种",
          dataIndex: "userId"
        },
        {
          title: "保值比例",
          dataIndex: ""
        },
        {
          title: "套保账户",
          dataIndex: ""
        },
        {
          title: "状态",
          dataIndex: ""
        },

        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" }
        }
      ],
      varietyColumns: [
        {
          title: "期货公司",
          dataIndex: "userId"
        },
        {
          title: "账户",
          dataIndex: ""
        },
        {
          title: "席位",
          dataIndex: ""
        },
        {
          title: "账户审核状态",
          dataIndex: ""
        },
        {
          title: "连接情况",
          dataIndex: ""
        },
        {
          title: "账户使用状态",
          dataIndex: ""
        },
        {
          title: "修改时间",
          dataIndex: "createDate"
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" }
        }
      ],

      tableData: [],
      paginationDatas: {
        pageSizeOptions: [ "10", "20", "30", "40", "50" ],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onPageOnlod() {
      this.loading = true;
      getUserList({
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = [];
          // this.tableData = res.data.pageData
          // this.paginationDatas.total = res.data.total
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    onSearch() {},
    handleView(row) {}
  }
};
</script>

<style lang="less" scoped>
::v-deep.el-row {
  width: 100%;
}
.integral {
  margin-top: 10px;
}
</style>
